<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        window.onload=function (){
            $.get(url+"sal/all",function(data){
                //data为对象数组
                let str='';
                $.each(data,function(i,obj){
                    str+=` <tr>
            <td>${obj.grade}</td>
            <td>${obj.losal}</td>
            <td>${obj.hisal}</td>
            <td>
<!--                目前只是跳转没有传递数据-->
                <a href="update.html?id=${obj.grade}">修改</a>
                <a href="javascript:;" onclick="del(this,${obj.grade})">删除</a>
            </td>
        </tr>`;
                })
                //替换tbody
                $("tbody").html(str)
            },"json")
        }

        /**
         *
         * @param obj 传递的对象
         * @param id 编号
         */
        function del(obj,id){
            let f=confirm("确定删除吗?")
            if (f){
                //向后端发送请求，传递数据，再进行回调处理
                //{名:值}
                $.get(url+"sal/del",{id:id},function(data){
                    if (data==1){
                        alert("删除成功")
                        //移除所在行
                        obj.parentNode.parentNode.remove()

                    }else{
                        alert("删除失败")
                    }
                });

            }else{
                alert("取消删除");
            }
        }

    </script>
</head>
<body>
<!--border表示边界为1px,1个像素-->
<table border="1">
<!--    caption表示表格标题-->
    <caption>工资列表</caption>
<!--    thead表示表头-->
    <thead>
        <tr>
            <th>等级</th>
            <th>最低工资</th>
            <th>最高工资</th>
            <th>操作
                <a href="insert.html">插入</a>
            </th>
        </tr>
    </thead>
    <tbody>
<!--        tr*2>td*4 tab键-->
        <tr>
            <td>1</td>
            <td>行政部</td>
            <td>四层</td>
            <td>
<!--                目前只是跳转没有传递数据-->
                <a href="update.html?id=1">修改</a>
                <a href="javascript:alert('确定删除吗')">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>行政部2</td>
            <td>四层2</td>
            <td>
                <!--                目前只是跳转没有传递数据-->
                <a href="update.html?id=2">修改</a>
                <a href="javascript:alert('确定删除吗')">删除</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>